<template>
	<view class="list-item u-border-bottom">
		<view class="list-item-left" :class="{ 'is-col': isCol }">
			<view class="left-label">{{ label }}</view>
			<view class="left-value">
				<slot v-if="$slots.content" name="content"></slot>
				<text v-else>{{ content }}</text>
			</view>
		</view>
		<view class="list-item-right" @click="$emit('on-error')" v-if="isError">
			<!-- <u-tag text="纠错" type="error" size="mini" /> -->
			纠错
		</view>
	</view>
</template>

<script>

export default {
	props: {
		label: {
			type: String,
			default: ''
		},
		content: {
			type: [String, Number],
			default: ''
		},
		isCol: {
			type: Boolean,
			default: false
		},
		isError: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {};
	},
	created() {
		// this.$slots
	}
};
</script>

<style lang="scss" scoped>
.list-item {
	display: flex;
	padding: $uni-spacing-row-lg;

	&-left {
		flex: 1;
		display: flex;
		align-items: center;

		.left-label {
			width: 160rpx;
			font-size: 30rpx;
			font-weight: bold;
		}

		.left-value {
			flex: 1;
			font-size: 28rpx;
			color: $u-tips-color;
		}
	}

	&-right {
		color: $u-type-error;
		font-size: 26rpx;
	}

	.is-col {
		display: block;

		.left-value {
			margin-top: $uni-spacing-row-base;
			line-height: 50rpx;
		}
	}
}
</style>
